<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getKitchen, consultKitchen } from '@/api/shop'
	
	const loading = ref(false)
	const oprateloading = ref(false)
	const form = ref({
		chefId: '',
		avatars: [],
		chefName: '',
		workYear: 1,
		introduction: '',
		specialtys: [],
		images: []
	})
	
	function getData(id) {
		loading.value = true
		getKitchen(id).then(res => {
			let result = res.result || {avatars: [], specialtys: [], images: []}
			form.value = result
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function nowConsult() {
		oprateloading.value = true
		consultKitchen({chefId: form.value.chefId, chefName: form.value.chefName}).then(res => {
			oprateloading.value = false
			uni.navigateTo({url: '/pages/shop/kitchenSuccess'})
		}).catch(() => oprateloading.value = false)
	}
	
	onLoad((option) => {
		let id = option.id
		if(id) getData(id)
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content">
			<uv-skeletons :loading="loading" :skeleton="[{ type: 'line', num: 4, gap: '24rpx', style: ['height: 472rpx;', 'height: 156rpx;', 'height: 164rpx;', 'height: 400rpx;']}]">
				<uv-image :src="form.avatars && form.avatars[0] && form.avatars[0].furl" width="100%" height="472"></uv-image>
				<view class="kitchen-info">
					<view class="box-view">
						<view class="box-name">{{form.chefName || '--'}}</view>
						<view class="kitchen-tags">
							<uv-tags v-for="(specialty, i) in form.specialtys" :key="i" :text="specialty" borderColor="rgba(250,63,0,0.1)"
								bgColor="rgba(250,63,0,0.1)" color="#FA3F00" shape="circle" size="mini"></uv-tags>
							<text>从业{{form.workYear || 1}}年</text>
						</view>
					</view>
					<view class="box-view">
						<view class="box-name">专长领域</view>
						<view class="kitchen-des">{{form.introduction || '--'}}</view>
					</view>
					<view class="box-view">
						<view class="box-name">精选菜品</view>
						<view class="kitchen-dish">
							<view v-for="item in form.images" :key="item.id" class="dish-box">
								<uv-image :src="item.fileAnnex && item.fileAnnex.furl" width="339rpx" height="226rpx" radius="16"></uv-image>
								<view class="dish-name uv-line-1">{{item.name || '--'}}</view>
							</view>
						</view>
					</view>
				</view>
			</uv-skeletons>
		</view>
		<view class="app-bottom">
			<uv-button color="linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%)" shape="circle" text="立即咨询" :disabled="loading" @click="nowConsult"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 120rpx;
		.app-content{
			padding-bottom: 24rpx;
			.kitchen-info{
				margin-top: 30rpx;
			}
			.box-view{
				padding: 24rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;
				.box-name{
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
				.kitchen-tags{
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 12rpx;
				}
				.kitchen-des{
					margin-top: 24rpx;
				}
				.kitchen-dish{
					margin-top: 24rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 24rpx;
					.dish-box{
						display: flex;
						flex-direction: column;
						gap: 16rpx;
						.dish-name{
							text-align: center;
						}
					}
				}
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			height: 120rpx;
			padding: 16rpx 24rpx;
			background-color: #FFFFFF;
			border-top: 2rpx solid #D7DBE1;
		}
	}
</style>